<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>指针爱情-秀恩爱</title>

	<link href="/zzLoveProduct/story/Pl_story.baihe.com_1/public.css"
		rel="stylesheet" type="text/css">
		<link href="/zzLoveProduct/story/Pl_story.baihe.com_1/story.css"
			rel="stylesheet" type="text/css">
			<script
				src="/zzLoveProduct/story/Pl_story.baihe.com_1/common/tongji-1.0.1.min.js"
				type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript"
				src="/zzLoveProduct/story/Pl_story.baihe.com_1/3rd-lib/jquery-1.8.3.min.js"
				charset="utf-8"></script>
			<script type="text/javascript"
				src="/zzLoveProduct/story/Pl_story.baihe.com_1/common/baihe.js"
				charset="utf-8"></script>
			<script type="text/javascript"
				src="/zzLoveProduct/story/Pl_story.baihe.com_1/js/jquery.imageScroller.js"
				charset="utf-8"></script>

			<style type="text/css">
#menu {
	height: 100px;
	width: 200px;
	overflow: hidden;
	text-align: center;
}

#menu ul li {
	float: left;
	margin: 0 5px;
	list-style-type: none;
}

/* Menu Link Styles */
#menu ul a {
	display: block;
	background: #e70f23;
	color: #fff;
	height: 100px;
	width: 200px;
	font: lighter 2em/100px "Helvetica Neue", Arial, Helvetica, Geneva,
		sans-serif;
	text-decoration: none;
	-webkit-transition: margin .4s ease-in-out;
	-moz-transition: margin .4s ease-in-out;
	-o-transition: margin .4s ease-in-out;
	-ms-transition: margin .4s ease-in-out;
	transition: margin .4s ease-in-out;
}

/* Secondary Link Styles */
#menu ul a:nth-of-type(even) {
	background: #000;
	color: white;
}

/* Hover Slide */
#menu ul li:hover :first-child {
	margin-top: -100px;
}
</style>
</head>

<body>
	<!-- 标准头 -->

	<!-- 广告位 -->
	<!-- 广告位 -->

	<div class="story">
		<div class="storyNav">
			<a href="" class="logo" id="zzlovehead">秀恩爱</a>
		</div>
		<table width="45%" height="100px">
			<tr>
				<td>
					<div id="menu">
						<ul>
							<li><a href="/zzLoveProduct/index/index.jsp">快点我</a> <a
								href="/zzLoveProduct/index/index.jsp">主页</a></li>
						</ul>
					</div>
				</td>

				<td>
					<div id="menu">
						<ul>
							<li><a href="/zzLoveProduct/match/match.jsp">点我嘛</a> <a
								href="/zzLoveProduct/match/match.jsp">心灵匹配</a></li>
						</ul>
					</div>
				</td>
				<td>
					<div id="menu">
						<ul>
							<li><a href="/zzLoveProduct/HomeServlet">你到底点不点我</a> <a
								href="/zzLoveProduct/HomeServlet">个人主页</a></li>
						</ul>
					</div>
				</td>
				<td>
					<div id="menu">
						<ul>
							<li><a href="/zzLoveProduct/search/Search.jsp">不点我走了</a> <a
								href="/zzLoveProduct/search/Search.jsp">搜索</a></li>
						</ul>
					</div>
				</td>
			</tr>
		</table>


		<div class="firstFocus">
			<div class="focusCont">
				<div class="focusPic">
					<div class="arrowFocus" style="left: 0px;">
						<a href="javascript:;" style="display: none;" class="prev">上一张</a>
					</div>
					<div class="arrowFocus" style="right: 0px;">
						<a href="javascript:;" style="display: none;" class="next">下一张</a>
					</div>
					<ul class="cont">
						<li><img
							src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/album/channel/story.png"
							alt="">
								<div class="intr">
									<p>
										<strong>幸福来得好突然</strong><br>&nbsp;&nbsp;&nbsp;我在指针爱情网认识了她。和她在一起的每一天，开心<a
											href="javascript:;" target="_blank">[阅读全文]</a>
									</p>
								</div></li>
						<li><img
							src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/album/channel/02.jpg"
							alt="">
								<div class="intr">
									<p>
										<strong>幸福走的好突然</strong><br>&nbsp;&nbsp;&nbsp;我在指针爱情网离开了她。和她在一起的每一天，开心<a
											href="javascript:;" target="_blank">[阅读全文]</a>
									</p>
								</div></li>
					</ul>
					<ol class="icon"></ol>
				</div>
			</div>
			<div class="tabList">
				<div class="tabNav">
					<a href="javascript:;" class="active" id="tabCont1"
						onclick="change_tab('tab1');return false;"><span>人气</span></a> <a
						href="javascript:;" id="tabCont2"
						onclick="change_tab('tab2');return false;"><span>最新</span></a>
				</div>
				<div class="list demo1">
					<dl>
						<dt class="top">
							<span>1</span><a
								href="https://www.toutiao.com/group/6727914055253623304/"
								target="_blank">郑爽穿校服再现楚雨荀</a><img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/hot.png"
								alt="">
						</dt>
						<dd>106424</dd>
					</dl>
					<dl>
						<dt class="top">
							<span>2</span><a href="https://weibo.com/2360812967/I3iMXA9IK"
								target="_blank">当我曾是少年</a><img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/hot.png"
								alt="">
						</dt>
						<dd>95011</dd>
					</dl>
					<dl>
						<dt class="top">
							<span>3</span><a href="https://weibo.com/1878546883/I3i7YEDbL"
								target="_blank">水面之下我想要更快、更强</a><img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/hot.png"
								alt="">
						</dt>
						<dd>84796</dd>
					</dl>
					<dl>
						<dt>
							<span>4</span><a href="https://weibo.com/5611783716/I3oLyeKS7"
								target="_blank">感终于来了~赵丽颖复工</a>
						</dt>
						<dd>84728</dd>
					</dl>
					<dl>
						<dt>
							<span>5</span><a href="https://weibo.com/1594052081/I3pqxsl3n"
								target="_blank">香港，我们永远在一起</a>
						</dt>
						<dd>80863</dd>
					</dl>
					<dl>
						<dt>
							<span>6</span><a href="https://weibo.com/1893711543/I3nyyAYtz"
								target="_blank">张家辉申请了“渣渣辉”</a>
						</dt>
						<dd>77483</dd>
					</dl>
					<dl>
						<dt>
							<span>7</span><a href="https://weibo.com/6883966016/I3o7nsGEC"
								target="_blank">今天也是幸福的一天〜‼️</a>
						</dt>
						<dd>76734</dd>
					</dl>
					<dl>
						<dt>
							<span>8</span><a href="javascript:;" target="_blank">没那么简单</a>
						</dt>
						<dd>70545</dd>
					</dl>
					<dl>
						<dt>
							<span>9</span><a href="javascript:;" target="_blank">我们闪...</a>
						</dt>
						<dd>69313</dd>
					</dl>
					<dl>
						<dt>
							<span>10</span><a href="javascript:;" target="_blank">幸福来得太突然</a>
						</dt>
						<dd>68636</dd>
					</dl>
				</div>
				<div class="list demo2" style="display: none;">
					<dl>
						<dt class="top">
							<span>1</span><a href="javascript:;" target="_blank">Isabellae</a><img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/hot.png"
								alt="">
						</dt>
						<dd>2863</dd>
					</dl>
					<dl>
						<dt class="top">
							<span>2</span><a href="javascript:;" target="_blank">what a
								surprise</a><img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/hot.png"
								alt="">
						</dt>
						<dd>17957</dd>
					</dl>
					<dl>
						<dt class="top">
							<span>3</span><a href="javascript:;" target="_blank">it's my
								story</a><img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1/story/hot.png"
								alt="">
						</dt>
						<dd>6851</dd>
					</dl>
					<dl>
						<dt>
							<span>4</span><a href="javascript:;" target="_blank">ojbk...</a>
						</dt>
						<dd>3210</dd>
					</dl>
					<dl>
						<dt>
							<span>5</span><a href="javascript:;" target="_blank">let's
								rock</a>
						</dt>
						<dd>2752</dd>
					</dl>
				</div>
			</div>
		</div>
		<h1>
			<a href="javascript:;" target="_blank">查看更多></a>我的风采
		</h1>
		<div class="picList">
			<ul>
				<c:forEach items="${list }" var="story">
					<li>
						<div class="pic">
							<img
								src="/zzLoveProduct/story/Pl_story.baihe.com_1//story/album/happiness/${story.photono }"
								alt="">
								<div class="txt">
									<p>${story.body }</p>
									<a href="#" target="_blank">[阅读全文]</a>
								</div>
						</div>
						<div class="name">${story.username}</div>
					</li>
				</c:forEach>
			</ul>
		</div>
		<h1>写风采</h1>
		<div>
		
			<form action="${pageContext.request.contextPath }/FileServlet"
				method="post" enctype="multipart/form-data">
				<input type="file" name="upload" />
				<input type="submit"value="上传文件">
			</form>
			<br>
			<form action="${pageContext.request.contextPath }/FileServlet"
				method="post">
					我的故事:<br>
				<textarea rows="10" cols="100" name="myStory"></textarea><br>
				<input type="submit"value="上传">
			</form>
			
			<br>
		</div>


		<div class="adv90">
			<a tareget="_blank" href="javascript:;"><img
				src="/zzLoveProduct/story/Pl_story.baihe.com_1/images/title.png"></a>
		</div>

		<script type="text/javascript"
			src="/zzLoveProduct/story/Pl_story.baihe.com_1/js/hmbaidu.js"
			charset='utf-8'></script>
		<!-- Start Alexa Certify Javascript -->
		<script type="text/javascript">
			_atrk_opts = {
				atrk_acct : "O3rui1asyr00wL",
				domain : "baihe.com",
				dynamic : true
			};
			(function() {
				var as = document.createElement('script');
				as.type = 'text/javascript';
				as.async = true;
				as.src = "https://d31qbv1cthcecs.cloudfront.net/atrk.js";
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(as, s);
			})();
		</script>
		<noscript>
			<img src="atrk-O3rui1asyr00wL.gif" style="display: none" height="1"
				width="1" alt="">
		</noscript>
		<!-- End Alexa Certify Javascript -->
	</div>
	<!-- 标准尾  -->
	<script type="text/javascript"
		src="/zzLoveProduct/story/Pl_story.baihe.com_1/3rd-lib/jquery.foucsFun.js"></script>
	<script>
		//---焦点图
		$(function() {
			$('.focusPic').foursFn({
				isTab : true, //是否有tab
				isTabNum : true, //tab里是否显示数字
				tabClassName : 'active', //当前tab的样式
				isState : true, //是否有图片说明
				stateClassName : '.icon', //图片说明的样式                          
				timer : 3500, //图片切换时间
				isBg : false,
			});
		});

		function StartScrol(rid) {
			if (rid == 1)
				objInterval1 = setInterval("scoll('1')", 7000);
			if (rid == 2)
				objInterval2 = setInterval("scoll('2')", 7000);
			if (rid == 3)
				objInterval3 = setInterval("scoll('3')", 7000);

		}
		function StopScrol(rid) {
			if (rid == 1)
				window.clearInterval(objInterval1);
			if (rid == 2)
				window.clearInterval(objInterval2);
			if (rid == 3)
				window.clearInterval(objInterval3);
		}
		$(function() {
			StartScrol(1);
		});
	</script>
</body>
</html>
